<%@page import="java.net.URLDecoder"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@page import="br.com.fatecpg.babelchat.Chat"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html class="wf-proximanova1proximanova2-n1-active wf-active">
    <head>
        <% Chat sala = (Chat) request.getAttribute("sala");%>
        <meta property="fb:admins" content="568720986" />
        <meta property="fb:app_id" content="247146371975479" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
        {lang: "en"}

<fmt:setLocale scope="session" value="${param['language']}" />
        </script>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
        <title>Babel Chat</title>
        <link href="../about_arquivos/workspace.css" media="screen" rel="stylesheet" type="text/css">
        <link href="../style.css" media="screen" rel="stylesheet" type="text/css">
        <!--[if IE 7]>
        <link href="/stylesheets/ie7.css?1313421292" media="screen" rel="stylesheet" type="text/css" />
        <![endif]-->
        <!--[if IE 8]>
        <link href="/stylesheets/ie8.css?1313421292" media="screen" rel="stylesheet" type="text/css" />
        <![endif]-->
       <link href="../imagens/ico.png" rel="shortcut icon" type="image/x-icon">

        <%--    <script src="about_arquivos/jlt3cri.js" type="text/javascript"></script>
        <style type="text/css">#header h1,.tk-proxima-nova{font-family:proxima-nova-1,proxima-nova-2,sans-serif;}</style><link href="about_arquivos/jlt3cri-d.css" rel="stylesheet"><script>
            //<![CDATA[
            try{Typekit.load();}catch(e){}
            //]]>
        </script>

        <style type="text/css">
            <!--
            #apDiv1 {
                position:absolute;
                width:200px;
                height:29px;
                z-index:1;
                left: 42px;
                top: 10px;
        border:
            }
            -->

        </style>--%>
        <style type="text/css">

        #apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 17px;
	top: 43px;
}
        #apDiv2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 177px;
	top: 62px;
        border: 1px white;
}
        </style>
        <script type="text/javascript" src="http://api.microsofttranslator.com/V1/Ajax.svc/Embed?appId=8FB8C763CAE4D7836FE9AF2E808B732A2A23909E"></script>
        <script type="text/javascript">
            function iniciaAjax() {
                var objetoAjax = false;
                if (window.XMLHttpRequest) {
                    objetoAjax = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    try {
                        objetoAjax = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch(e) {
                        try {
                            objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch(ex) {
                            objetoAjax = false;
                        }
                    }
                }
                return objetoAjax;
            }
            var req=iniciaAjax();
            var textoTraduzido;
            var i=0;
            String.prototype.trim = function () {
                return this.replace(/^\s+|\s+$/g,"");
            }
            String.prototype.getLanguage = function(){
                    if(this=='ar_AR')return 'ar';
                    else if(this=='bg_BG')return 'bg';
                    else if(this=='ca_ES')return 'ca';
                    else if(this=='zh_CN')return 'zh-CHS';
                    else if(this=='zh_HK')return 'zh-CHT';
                    else if(this=='zh_TW')return 'zh-CHT';
                    else if(this=='cs_CZ')return 'cs';
                    else if(this=='da_DK')return 'da';
                    else if(this=='nl_BE')return 'nl';
                    else if(this=='nl_NL')return 'nl';
                    else if(this=='en_GB')return 'en';
                    else if(this=='en_PI')return 'en';
                    else if(this=='en_UD')return 'en';
                    else if(this=='en_US')return 'en';
                    else if(this=='et_EE')return 'et';
                    else if(this=='fb_FI')return 'fi';
                    else if(this=='fi_FI')return 'fi';
                    else if(this=='fr_FR')return 'fr';
                    else if(this=='fr_CA')return 'fr';
                    else if(this=='de_DE')return 'de';
                    else if(this=='el_GR')return 'el';
                    else if(this=='el_GR')return 'el';
                    else if(this=='HAITIAN CREOLE')return 'ht';
                    else if(this=='he_IL')return 'he';
                    else if(this=='hi_IN')return 'hi';
                    else if(this=='hu_HU')return 'hu';
                    else if(this=='id_ID')return 'id';
                    else if(this=='it_IT')return 'it';
                    else if(this=='ja_JP')return 'ja';
                    else if(this=='ko_KR')return 'ko';
                    else if(this=='lv_LV')return 'lv';
                    else if(this=='lt_LT')return 'lt';
                    else if(this=='nb_NO')return 'no';
                    else if(this=='nn_NO')return 'no';
                    else if(this=='pl_PL')return 'pl';
                    else if(this=='pt_BR')return 'pt';
                    else if(this=='pt_PT')return 'pt';
                    else if(this=='ro_RO')return 'ro';
                    else if(this=='ru_RU')return 'ru';
                    else if(this=='sk_SK')return 'sk';
                    else if(this=='sl_SI')return 'sl';
                    else if(this=='es_LA')return 'es';
                    else if(this=='es_CL')return 'es';
                    else if(this=='es_CO')return 'es';
                    else if(this=='es_ES')return 'es';
                    else if(this=='es_MX')return 'es';
                    else if(this=='es_VE')return 'es';
                    else if(this=='sv_SE')return 'sv';
                    else if(this=='th_TH')return 'th';
                    else if(this=='tr_TR')return 'tr';
                    else if(this=='uk_UA')return 'uk';
                    else if(this=='vi_VN')return 'vi';
            }
            function carregar() {
                var areaMensagem = document.getElementById("mensagem");
                areaMensagem.onkeyup = function(evt) {
                    evt = evt || window.event;
                    if (evt.keyCode == 13) {
                        converterJSON();
                    }
                }
                refresh();
            }
            function converterJSON(){
                var mensagem = document.getElementById('mensagem');
                refresh(mensagem.value);
                clear("mensagem");
            }
            function refresh(mensagem){
                var url = "/babelChat/mensagens.json?sala=<%=sala.nome%>&index="+i;
                if(mensagem){
                    url+="&mensagem="+unescape(mensagem)+"&idioma=<%= request.getSession().getAttribute("idioma")%>";
                }
                req.open("Get",url,true);
                req.onreadystatechange = callback;
                req.send(null);
                setTimeout('refresh()', 2000);
            }
            function callback(){
                if (req.readyState==4){
                    if (req.status == 200){
                        populateJSON();
                    }
                }
            }
            function populateJSON() {
                var jsonData =  req.responseText;
                var itemDetails = eval('(' + jsonData + ')');
                if(itemDetails.length!=0){
                    for(j=0;j<itemDetails.mensagens.length;j++){
                        i++;
                        var mensagem = itemDetails.mensagens[j];
                        var para = '<%= request.getSession().getAttribute("idioma")%>'.getLanguage();
                        var de = mensagem.idioma.getLanguage();
                        var content = "<DIV class='fb5' width='300'>";
                        content +="<table>";
                        content +="     <tr>";
                        content +="   <td rowspan='2'><img id='user_image' src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/"+ mensagem.imagem+"_q.jpg' alt='user photo' /></td>";
                       // content +=" <td><span class='usuario' style='display: block'>("+mensagem.criacao.substring(11, 16)+")<b>"+mensagem.usuario+"</b> diz: </span></td>";
                        content +=" <td align='center'><span class='usuario' style='display: block'>("+mensagem.criacao.substring(11, 16)+")<b>"+mensagem.usuario+"</b><img src='../flags/"+mensagem.flag +".png' alt='"+mensagem.flag+"'/></span><span id='mensagem{"+i+"}' style='text-align: justify;' title='"+mensagem.mensagem+"' class='mensagem'></span></DIV></td>";
                        content +=" </tr> ";
                        content +="</table>";
                        //content += "<img src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/"+ mensagem.imagem+"_q.jpg' alt='user photo' />";
                        //content += "<span class='dataHora'>às "+mensagem.criacao.substring(11, 16)+" -</span>";
                        //content += "<span class='usuario' style='display: block'><b>"+mensagem.usuario+"</b> diz: </span></br><span id='mensagem{"+i+"}' title='"+mensagem.mensagem+"' class='mensagem'></span></DIV>";
                        var tbody = document.getElementById("tbodyMensagens");
                        tbody.insertRow(0).insertCell(0).innerHTML = content;
                        processTraducao("mensagem{"+i+"}", mensagem.mensagem, de, para);
                    }
                }
                var content = "<ul>";
                for(var k=0;k<itemDetails.usuarios.length;k++){
                content += "<li>• "+itemDetails.usuarios[k].nome+"</li>";
                }
                content += "</ul>"
                var divUsuarios = document.getElementById('usuarios');
                divUsuarios.innerHTML = content;
            }
            function processTraducao(spanId, mensagem, de, para){
                Microsoft.Translator.translate(mensagem, de, para, function(translation) {
                    var span = document.getElementById(spanId);
                    if(translation!="undefined" && translation!=""){
                        span.innerHTML = translation;
                    }else{
                        span.innerHTML = "[Não foi possível realizar a Tradução]";
                    }
                });
            }
            function clear(idDoCampo){
                if(idDoCampo == "tabelaMensagem"){
                    var tbody = document.getElementById("tbodyMensagens");
                    tbody.innerHTML = "";
                }else{
                    var elemento = document.getElementById(idDoCampo);
                    elemento.value="";
                }
            }
            function focusIn(idFocus){
                if(idFocus=="mensagem"){
                    document.getElementById(idFocus).focus();
                    carregar();
                }else{
                    document.getElementById(idFocus).focus();
                }
            }
            function exitSession(){
                var url = '/babelChat/userconfig?limpar=true';
                req.open("Get",url,true);
                req.onreadystatechange = callback2;
                req.send(null);
            }
            function callback2(){
                if (req.readyState==4){
                    if (req.status == 200){
                        redirect();
                    }
                }
            }
            function redirect(){
                window.location = "/babelChat/index.jsp";
            }

        </script>
</head>
    <body class="subpage" onLoad="focusIn('mensagem')">
        <div id="apDiv2">

<fmt:setLocale scope="session" value="<%= request.getSession().getAttribute("idioma") %>" />
<div  align="center" style="float: left; border: #ffffff 1px; padding: 5px;">
                                        <img id='user_image'  src='http://profile.ak.fbcdn.net/hprofile-ak-snc4/<%= request.getSession().getAttribute("imagem") %>_q.jpg' alt='user photo' />
                                        <div class="fb1"><%= request.getSession().getAttribute("usuario") %><img src='../flags/<%= request.getSession().getAttribute("idioma") %>.png' alt='User Idioma'/></div>

                                    </div></div>
<% if(request.getSession().getAttribute("idioma")!=null && request.getSession().getAttribute("usuario")!=null){%>
        <div id="flash_msg" style="display:none">

    
            <div class="container_12">
                <p class="notice"></p>
                <p class="alert"></p>
            </div>
        </div>
        <div id="top_bar">
            <div class="container_12">
                <div class="grid_3"><a href="../babel.jsp"><img alt="Logo" src="../about_arquivos/logo.png"></a></div>
                <div class="grid_5 prefix_4 make_relative">
                    <div id="counter">
                        <div id="">
                      <!-- <table width="200" border="0">
                               <tr>
                                  <td><a href="#"><img src="../flags/pt_BR.png"></a></td>
                                  <td><a href="#"><img src="../flags/en_US.png"></a></td>
                                  <td><a href="#"><img src="../flags/es_ES.png"></a></td>
                                </tr>
                              </table> -->
                        </div>
                        <a href="#">
                            <div style="display: none;" id="counter_overlay"></div>
                        </a>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div id="header_outer">
            <div id="header_outer_top"></div>
            <div id="header">
                <div id="header_inner">
                    <div class="container_12">
                        <div align="center">

                            <center><h3 id="nomeSala"><%=sala.nome%>

    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></h3>
                                <table id="tabelaMensagem">                                    <thead>
                                        <fmt:message key="chat.mensagem" /><br />
                                    <textarea id="mensagem" cols="60" rows="2" ></textarea><br>
                                    <fb:login-button style="top: 5px" size="medium" onClick="converterJSON()">Enviar</fb:login-button>&nbsp;
                                    <fb:login-button size="medium" onClick="exitSession()">Sair da Sala</fb:login-button>
                                    </thead></table>
                                
                          </center>
                                    <%--
                                    <button class="facebook" value="ok" name="ok">OK</button>
                                    <button class="twitter" value="ok" name="ok">OK</button>
                                    --%>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="main">
            <div id="left">
     <br />
      <br />
        <br />
     <br />
  <div class="nav-box">
    <div class="nav-header" align="center"><fmt:message key="chat.redeSocial" /></div>
    <div class="nav-body"><center>  <table width="200" align="center">
  <tr>
      <td align="center"><h3><g:plusone size="tall"  href='http://localhost:8080/babelChat/index.jsp'></g:plusone></h3>
<div id="fb-root"></div>

<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</td>
  </tr>
  <tr>
    <td align="center">    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>

    <div>

       <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://dev.twitter.com/pages/tweet_button" data-via="your_screen_name" data-text="Checking out this page about Tweet Buttons" data-related="anywhere:The Javascript API" data-count="vertical">Tweet</a>
    </div><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td>
  </tr>
   <tr>
    <td align="center"><a href="https://twitter.com/babelchat" class="twitter-follow-button">Follow @BabelChat</a></td>
    <fb:like href="http://www.localhost:8080/babelchat" send="true" layout="box_count" width="450" show_faces="true" font="arial"></fb:like>
  </tr>
</table></center></div>
  </div>

</div>
<div id="center">
  <div class=""></div>
  <div class="center-body" align="center"><fmt:message key="chat.mensagens" />

<center> <table id="tabelaMensagem">
<thead>
</thead>
<tbody id="tbodyMensagens"></tbody>
<tfoot></tfoot>
</table></center>
    <br />
    <br />
  </div>
</div>
<div id="right">
     <br />
      <br />
       <br />
      <br />
  <div class="nav-box">
    <div class="nav-header" align="center">Lista de Usuários</div>
    <div class="nav-body"></div>
    <div id="usuarios"></div>
  </div>
</div>
<div class="grid_9">
<div id="sub_nav">
<ul>
<li class="current"></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>

</div>
<div class="clear"></div>

</div>
        <div id="copyright"></div>
        <div id="footer">
            <div class="container_12">
                <div class="grid_4">
                    <div id="footer_campus_selector"> <span id="footer_campus_current"> <a href="http://www.fatecpg.com.br" class="location_link">Fatec Praia grande</a></span> <a href="#" id="footer_campus_trigger"> <span class="translation_missing" title="translation missing: en.select_campus">Select Campus</span></a></div>
                </div>
                <div class="grid_4 align_right"> <img alt="Logo" src="../about_arquivos/logo.png"> </div>
                <div class="grid_4">
                    <div id="footer_search">
                        <form action="" method="get">
                            <input name="cof" value="FORID:11" type="hidden">
                            <label for="footer_search_input">
                                <label><span class="style2">Powered By Microsoft</span></label>
                            </label>
                        </form>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
        <div id="campus_menu_tooltip">
            <span class="menu_top"></span>
            <ul>
                <li>Babel Chat</li>
            </ul>
            <span class="menu_bottom"></span>
        </div>
        <div id="campus_menu">
            <span class="menu_top"></span>

            <span class="menu_bottom"></span>
        </div>
        <div id="facebook_menu">
            <span class="menu_top"></span>
            <ul>
                <li class="header"><img alt="Facebook Pages" src="about_arquivos/facebook_menu_header.png" width="134" height="30"></li>
                <li class="subheader">Main Page</li>
                <li><a href="#" class="main">Babel chat</a></li>
                <li class="subheader">Babel Chat</li>

            </ul>
            <span class="menu_bottom"></span>
        </div>
        <% } %>
    </body></html>
